<!DOCTYPE html>
<!-- saved from url=(0068)https://codelover.club/coursefiles/FhNb1Ob3Uu7lqBi3aSaGnUGnZ6sy.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        /* 给所有div中的文字一个统一的前景色 */
        color: rgb(109, 179, 19);
        width: 200px;
        height: 100px;
        /* 画一个宽一些的边框，留意边框下的背景色 */
        border: 15px red dashed;
        /* div间隔 */
        margin-bottom: 5px;
    }

    .test-named-color {
        background-color: red;
    }
    .test-rgb{
        background-color: rgb( 20, 29, 220);
    }
    .shiliu{
        background-color: #115700;
    }
    .teshu{
        
    }
    .toumingdu{
        background-color: blueviolet;
        opacity: 50%;
    }
</style>

<body>
    <div class="test-named-color">测试有名颜色 </div>
    <div style="background-color: aqua;">测试有名颜色</div>
    <div style="background-color: black;">测试有名颜色</div>
    <div style="background-color: blue;">测试有名颜色</div>
    <!-- rgb,rgba颜色表示 -->
    <div class="test-rgb" >测试rgb颜色</div>
    <!--请设计div和class，探究长短16进制颜色表示 -->
    <div class="shiliu">
        测试16进制颜色
    </div>
    <!--请设计div和class，探究hsl,hsla颜色表示 -->
    <div class="teshu">
        探究hsl，hsla颜色表示
    </div>
    <!--请设计div和class，探究不透明度opacity 并和rgba\hsla做效果比较-->
    <div class="toumingdu">
        探究不透明度
    </div>

    <hr>

    这是源代码

    <pre>
        &ltstyle>
            div {
                /* 给所有div中的文字一个统一的前景色 */
                color: rgb(109, 179, 19);
                width: 200px;
                height: 100px;
                /* 画一个宽一些的边框，留意边框下的背景色 */
                border: 15px red dashed;
                /* div间隔 */
                margin-bottom: 5px;
            }
        
            .test-named-color {
                background-color: red;
            }
            .test-rgb{
                background-color: rgb( 20, 29, 220);
            }
            .shiliu{
                background-color: #115700;
            }
            .teshu{
                
            }
            .toumingdu{
                background-color: blueviolet;
                opacity: 50%;
            }
        &lt/style>
        
        &ltbody>
            &ltdiv class="test-named-color">测试有名颜色 &lt/div>
            &ltdiv style="background-color: aqua;">测试有名颜色&lt/div>
            &ltdiv style="background-color: black;">测试有名颜色&lt/div>
            &ltdiv style="background-color: blue;">测试有名颜色&lt/div>
            &lt!-- rgb,rgba颜色表示 -->
            &ltdiv class="test-rgb" >测试rgb颜色&lt/div>
            &lt!--请设计div和class，探究长短16进制颜色表示 -->
            &ltdiv class="shiliu">
                测试16进制颜色
            &lt/div>
            &lt!--请设计div和class，探究hsl,hsla颜色表示 -->
            &ltdiv class="teshu">
                探究hsl，hsla颜色表示
            &lt/div>
            &lt!--请设计div和class，探究不透明度opacity 并和rgba\hsla做效果比较-->
            &ltdiv class="toumingdu">
                探究不透明度
            &lt/div>
        </pre>

    



</body></html>